<template lang="html">
  <div class="weekend">
    <h2 class="week-title">周末去哪儿</h2>
    <div class="week-item" v-for="item of weekendList" :key="item.id">
      <div class="project-img-box">
        <img class="project-img" :src="item.imgUrl" alt="">
      </div>
      <div class="project-info">
        <p class="project-name">{{item.title}}</p>
        <p class="project-desc">{{item.desc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
  // data () {
  //   return {
  //     weekendList: [{
  //       id: '0001',
  //       imgUrl: 'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
  //       title: '北京必游TOP10-1',
  //       desc: '来北京必去的景点非这些地方莫属'
  //     }, {
  //       id: '0002',
  //       imgUrl: 'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
  //       title: '北京必游TOP10-2',
  //       desc: '来北京必去的景点非这些地方莫属'
  //     }, {
  //       id: '0003',
  //       imgUrl: 'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
  //       title: '北京必游TOP10-3',
  //       desc: '来北京必去的景点非这些地方莫属'
  //     }]
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  .weekend
    background: #F5F5F5
    .week-title
      height: .8rem
      padding-left: .26rem
      line-height: .8rem
      color: #212121
    .week-item
      position: relative
      margin-bottom: .1rem
      background: #fff
      .project-img-box
        overflow: hidden
        height: 0
        padding-bottom: 37.4375%
        .project-img
          width: 100%
      .project-info
        position: relative
        padding: .14rem .2rem .2rem .2rem
        .project-name, .project-desc
          overflow: hidden
          padding-right: 1.4rem
          color: #212121
          font-size: .28rem
          line-height: .48rem
          white-space: nowrap
          text-overflow: ellipsis
</style>
